<template>
    <div class="print">
        <div class="print-container">
            <div class="print-top">
                <div class="print-top-left">打印机列表</div>
            </div>
            <div class="print-nav">
                <div class="print-nav-left" @click="navChange">
                    <div class="nav-left-btn" :class="{active:navActive == 0}" data-type="set">打印机设置</div>
                    <div class="nav-left-btn" :class="{active:navActive == 1}" data-type="record">打印记录查询</div>
                </div>
                <div class="print-nav-right" @click="add">
                    <div class="nav-right-item">+</div>
                    <div class="nav-right-value">添加打印机</div>
                </div>
            </div>
            <div class="print-main">
                <div class="print-main-top">
                    <div class="main-top-item" style="width: 10%;">打印机名称</div>
                    <div class="main-top-item" style="width: 12%;">打印机IP</div>
                    <div class="main-top-item" style="width: 10%;">备用打印机名称</div>
                    <div class="main-top-item" style="width: 10%;">备用打印机IP</div>
                    <!-- <div class="main-top-item" style="width: 8%;">状态</div> -->
                    <div class="main-top-item" style="width: 28%;">设置类型</div>
                    <div class="main-top-item" style="width: 30%;">操作</div>
                </div>
                <div class="print-main-center">
                    <ul class="print-center-list">
                        <li class="list-li" v-for="(v,k) in printList" :key="k">
                            <div class="list-li-item" style="width: 10%;">{{ v.Name }}</div>
                            <div class="list-li-item" style="width: 12%;">{{ v.IpAddress }}</div>
                            <div class="list-li-item" style="width: 10%;">{{ v.SparePrintName }}</div>
                            <div class="list-li-item" style="width: 10%;">{{ v.SpareIpAddress }}</div>
                            <!-- <div class="list-li-item" style="width: 8%;" :style="{color:v.Online == '在线'?'#0ACC6B':'#FF3333'}">{{ v.Online }}</div> -->
                            <div class="list-li-item" style="width: 28%;">{{ v.PrintTemplateName }}</div>
                            <div class="list-li-spe" style="width: 30%;">
                                <div class="spe-item" @click="del(v)">删除</div>
                                <div class="spe-item" @click="edit(v)">编辑</div>
                                <div class="spe-item" @click="set(v)">配置</div>
                                <div class="spe-item" @click="printTest(v)">测试</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- <div class="print-footer">富德快Saas智能收银软件</div> -->
        </div>
    </div>
    <el-dialog
        v-model="popupShow"
        :close-on-click-modal="false"
        class="dailog"
        width="40%"
        style="border-radius: 8px;"
        >
        <div class="popup">
            <div class="popup-title">添加打印机</div>
            <div class="popup-main">
                <div class="popup-main-item">
                    <div class="item-title">打印机名称：</div>
                    <el-input v-model="printDetail.Name" placeholder="请输入打印机名称"></el-input>
                </div>
                <div class="popup-main-item">
                    <div class="item-title">IP地址：</div>
                    <el-input v-model="printDetail.IpAddress" placeholder="请输入ip地址"></el-input>
                </div>
                <div class="popup-main-item">
                    <div class="item-title">备用打印机名称：</div>
                    <el-input v-model="printDetail.SparePrintName" placeholder="请输入备用打印机名称"></el-input>
                </div>
                <div class="popup-main-item">
                    <div class="item-title">备用IP地址：</div>
                    <el-input v-model="printDetail.SpareIpAddress" placeholder="请输入备用ip地址"></el-input>
                </div>
                <div class="popup-main-item">
                    <div class="item-title">云打印：</div>
                    <el-switch v-model="IsCloud"  @change="IsCloudChange" ></el-switch>
                </div>
            </div>
            <div class="popup-footer">
                <div class="popup-footer-cancle" @click="popupShow=false">取消</div>
                <div class="popup-footer-confirm" @click="confirm">确认</div>
            </div>
        </div>
    </el-dialog>
    <ZDialog v-model="confirmShow" width="60%" title="提示" content="确定要删除打印机吗？" @cancel="confirmShow = false" @confirm="confirmDel()"></ZDialog>
  </template>
  <script setup>
  
    import Api from '@/api'
    import ZDialog from '@/components/Dialog/Dialog.vue'
    const router = useRouter()
    // 添加打印机弹窗
    const popupShow = ref(false) 
    //编辑数据
    const printDetail=ref({});

    //获取打印机列表
    const printList = ref([]);
    const getPrintTable = () => {
        Api.Common.PcObjProcess.Do({ "functionName": "GetPrints", "contentData": {}, "orgCode": "0004" })
            .then(res => {
                printList.value=[...res.result]
            })
    }
    getPrintTable();

    //添加
    const add=()=>{
        printDetail.value={};
        popupShow.value=true;
    }

    //编辑
    const edit=(e)=>{
        printDetail.value={...e};
        if(printDetail.value.IsCloud == 1) {
            IsCloud.value = true
        } else {
            IsCloud.value = false
        }
        console.log(printDetail.value,'printDetail.value')
        // IsCloud
        popupShow.value=true;
    }
     
    const IsCloud = ref(false)
    const IsCloudChange =(e)=> {
        if (e) {
            printDetail.value.IsCloud = 1
        } else {
            printDetail.value.IsCloud = 0
        }
    }
    //保存
    const confirm=()=>{
        if(!printDetail.value.IsCloud) {
            printDetail.value.IsCloud  = 0
        }
         
        if(!printDetail.value.Name) {
            ElNotification({title: '打印机名称不能为空',message: "提示", type: 'warning'})
            return
        }
        
        if(!printDetail.value.IpAddress) {
            ElNotification({title: 'IP地址不能为空',message: "提示", type: 'warning'})
            return
        }
        
        const contentData={...printDetail.value};
        const data={"functionName": "AddPrinter", "orgCode": "0004" ,"contentData":{...contentData}};
        //有值则为修改
        if(printDetail.value.Code){
            data.functionName="EditPrinter";
        }
        console.log(contentData);
        Api.Common.PcObjProcess.Do({...data}).then(res => {
                ElNotification({title: '提示',message: "成功", type: 'success'})
                popupShow.value=false;
                getPrintTable();
        })
    }

    //删除
    const confirmShow=ref(false);
    const del=(e)=>{
        confirmShow.value=true;
        printDetail.value={...e};      
    }
    const confirmDel=()=>{
        confirmShow.value=false;
        Api.Common.PcObjProcess.Do({ "functionName": "DelPrinter", "contentData": {"Code":printDetail.value.Code}, "orgCode": "0004" }).then(res => {
            console.log(res);
            getPrintTable();
        })
    };

    //打印测试
    const printTest=(e)=>{
        Api.Common.PcObjProcess.Do({ "functionName": "TestPrint", "contentData": {"Code":e.Code}, "orgCode": "0004" }).then(res => {
            ElNotification({title: '提示',message: "成功", type: 'success'});
        })
    }

    //配置
    const set=(e)=>{
        router.push({path: '/cashier/print/printSet',query:{Code:e.Code,Name:e.Name,IpAddress:e.IpAddress}})
    }

    const navActive = ref(0)
    const navChange = (e)=>{
        const title = e.target.dataset.type
        switch (title) {
            case 'set':
            navActive.value = 0
            router.push({path: '/cashier/print/printSet'})
                break;
        
            case 'record':
            navActive.value = 1
            router.push({path: '/cashier/print/printRecords'})
                break;
        }
    }

    
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/com_style_input.css';
    .print{
        background: #F2F2F2;
        height: 100%;
        position: relative;
        .print-container{
            margin: 0 auto;
            width: 1400px;
            .print-top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 20px;
                .print-top-left{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                }
                .print-top-right{
                    width: 100px;
                    height: 48px;
                    background: #CCCCCC;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            .print-nav{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 32px 0 20px 0;
                .print-nav-left{
                    display: flex;
                    align-items: center;
                    .nav-left-btn{
                        width: 240px;
                        height: 60px;
                        background: #FFFFFF;
                        border-radius: 8px;
                        border: 1px solid #E6E6E6;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #666666;
                        line-height: 60px;
                        text-align: center;
                        cursor: pointer;
                        margin-right: 20px;
                        &.active{
                            background: #FFD400;
                            color: #212121;
                        }
                    }
                }
                .print-nav-right{
                    width: 200px;
                    height: 60px;
                    border-radius: 8px;
                    border: 1px solid #FF6A00;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    .nav-right-item{
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        border: 1px solid #FF6A00;
                        font-size: 36px;
                        color: #FF6A00;
                        line-height: 26px;
                        text-align: center;
                        margin-right: 20px;
                    }
                    .nav-right-value{
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #FF6A00;
                        line-height: 60px;
                    }
                }
            }
            .print-main{
                width: 1400px;
                height: 606px;
                background: #FFFFFF;
                border-radius: 8px;
                padding: 20px;
                overflow-y: auto;
                .print-main-top{
                    display: flex;
                    align-items: center;
                    width: 1160px;
                    height: 48px;
                    background: #F9F9F9;
                    border-radius: 8px;
                    .main-top-item{
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #666666;
                        line-height: 48px;
                        text-align: center;
                    }
                }
                .print-main-center{
                    .print-center-list{
                        .list-li{
                            display: flex;
                            align-items: center;
                            padding: 6px 0;
                            .list-li-item{
                                font-family: Source Han Sans CN;
                                font-weight: 500;
                                font-size: 14px;
                                color: #212121;
                                line-height: 14px;
                                text-align: center;
                            }
                            .list-li-spe{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding: 0 20px;
                                .spe-item{
                                    width: 66px;
                                    height: 34px;
                                    border-radius: 4px;
                                    border: 1px solid #FF6A00;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #FF6A00;
                                    line-height: 34px;
                                    text-align: center;
                                    cursor: pointer;
                                    background: #fff;
                                }
                            }
                        }
                        .list-li:nth-child(2n){
                                background: #F2F2F2;
                             }
                    }
                }
            }
            .print-footer{
                position: absolute;
                left: 67px;
                bottom: 95px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                line-height: 12px;
            }
        }
    }
    .popup{
        padding: 20px 60px 0;
        .popup-title{
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
            line-height: 24px;
            padding: 20px 0;
            border-bottom: 1px solid #E6E6E6;;
        }
        .popup-main{
            height: 400px;
            .popup-main-item{
                padding-top:20px;
                display: flex;
                align-items: center;
                .item-title{
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                    width: 160px;
                    text-align: right;
                }
                ::v-deep(.el-input){
                    width: 436px;
                    height: 48px;
                    background: #F9F9F9;
                    border-radius: 8px;
                    padding: 0;
                }
                ::v-deep(.el-input__wrapper){
                    background: #F9F9F9;
                }
                ::v-deep(.el-input__wrapper:hover){
                    // box-shadow: 0 0 0 1px #212121 inset;
                }
            }
        }
        .popup-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            .popup-footer-cancle{
                width: 160px;
                height: 60px;
                background: #FFFFFF;
                border-radius: 8px;
                border: 1px solid #FF6A00;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #FF6A00;
                line-height: 60px;
                text-align: center;
                cursor: pointer;
                margin-right: 36px;
            }
            .popup-footer-confirm{
                width: 160px;
                height: 60px;
                background: #FF6A00;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #FFFFFF;
                line-height: 60px;
                text-align: center;
                cursor: pointer;
            }
        }
    }

    
    ::v-deep(.el-switch__label *) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #FF3333;
      line-height: 16px;
    }

    ::v-deep(.el-switch__core) {
      width: 80px;
      height: 36px;
      border-radius: 18px;
    }

    ::v-deep(.el-switch.is-checked .el-switch__core) {
      background: #FF6A00;
      border-color: #FF6A00;
    }

    ::v-deep(.el-switch__core .el-switch__action) {
      width: 32px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 50%;
    }

    ::v-deep(.el-switch.is-checked .el-switch__core .el-switch__action) {
      left: calc(100% - 30px)
    }
   
  </style>
  